<template>
    <div class="container yuan-container userpoints-list">
        <a-modal width="1300px" :visible="visible" title="积分明细" @cancel="closeModal"
            class="yuan-modal yuan-container userpoints-list-modal" :dialog-style="{ top: '20px' }">
            <a-card :title="'用户积分明细:'+this.editInfo.userName">
                <div>
                    用户当前积分：<span class="point-total c-success">{{pageData.currentPoints}}</span>
                    <span style="margin-left:20px"> </span>
                    用户累计积分：<span class="point-total c-primary">{{pageData.totalPoints}}</span>
                </div>
                <div style="margin:10px 0">
                    
                    <div class="type-list" :class="pageType==='2'&&'type-list-active'" @click="clickPageType('2')">
                        <div class="type-list-title ">邀请总积分</div>
                        <div>{{pageData.invitePoints || 0}}</div>
                    </div>

                    <div class="type-list" :class="pageType==='1'&&'type-list-active'" @click="clickPageType('1')">
                        <div class="type-list-title">签到总积分</div>
                        <div>{{pageData.signPoints||0}}</div>
                    </div>
                    <div class="type-list" :class="pageType==='3'&&'type-list-active'" @click="clickPageType('3')">
                        <div class="type-list-title">商品交易积分</div>
                        <div>{{pageData.goodsTradePoints || 0}}</div>
                    </div>
                    <div class="type-list" :class="pageType==='4'&&'type-list-active'" @click="clickPageType('4')">
                        <div class="type-list-title">机构交易积分</div>
                        <div>{{pageData.institutionTradePoints || 0}}</div>
                    </div>
                    <div class="type-list" :class="pageType==='5'&&'type-list-active'" @click="clickPageType('5')">
                        <div class="type-list-title">已消费积分</div>
                        <div>{{$toDecimalNoZero((pageData.totalPoints - pageData.currentPoints) || 0)}}</div>
                    </div>
                </div>
                <!-- <div class="filter-panel">
                    <div class="filter-list">
                        <span>用户名称：</span>
                        <a-input-search allowClear v-model="pageParams.userName" placeholder="用户名称" @search="resetList" />
                    </div>

                </div> -->
                <div class="table">
                    <a-table bordered :loading="loading" :rowKey="(item,i)=>item.id+'_'+i" :columns="columns"
                        :data-source="pageList" :pagination="pagination">

                    </a-table>
                </div>
            </a-card>
            <template slot="footer">
                <a-button @click="closeModal">
                    关闭
                </a-button>
            </template>
        </a-modal>
    </div>
</template>
<script lang="ts">
import platformApi from "@/api/platformApi";
import { format, toYuan } from "@/utils";
import { Component, Prop, Vue } from "vue-property-decorator";
@Component({
    name: "tpl",
    components: {},
})
export default class extends Vue {
    @Prop({ default: false }) visible!: boolean;
    @Prop({ default: "" }) editInfo!: any;

    loading = false;
    pageType = "2";
    pageList = [{ name: "测试商品" }];
    pageData: any = {};
    pagination = {
        current: 1,
        pageSize: 10,
        total: 0,
        onChange: this.pageChange,
    };
    pageParams: any = {
        userName: "",
    };
    columns: any[] = [];
    columnsDef:any[] = [
        {
            align: "center",
            dataIndex: "createTime",
            key: "createTime",
            title: "积分获取时间",
            customRender: (text: string, record: any, index: number) => {
                return format(record.createTime);
            },
        },
        {
            align: "center",
            dataIndex: "description",
            key: "description",
            title: "获取原因",
        },
        {
            align: "center",
            dataIndex: "points",
            key: "points",
            title: "获得积分数量",
        },
    ];
    shareColumns = [
        {
            align: "center",
            dataIndex: "invitedUserName",
            key: "invitedUserName",
            title: "邀请人",
        },
        {
            align: "center",
            dataIndex: "inviteType",
            key: "inviteType",
            title: "邀请方式",
        },
    ];
    goodsColumns = [
        {
            align: "center",
            dataIndex: "orderNo",
            key: "orderNo",
            title: "订单编号",
        },
        {
            align: "center",
            dataIndex: "goodsName",
            key: "goodsName",
            title: "商品名称",
        },
        {
            align: "center",
            dataIndex: "goodsPrice",
            key: "goodsPrice",
            title: "商品价格",
        },
        {
            align: "center",
            dataIndex: "orderAmount",
            key: "orderAmount",
            title: "订单金额",
        },
        {
            align: "center",
            dataIndex: "useCoupon",
            key: "useCoupon",
            title: "是否使用优惠券",
            customRender: (text: string, record: any, index: number) => {
                return record.useCoupon ? "使用" : "未使用";
            },
        },
    ];
    institutionColumns = [
        {
            align: "center",
            dataIndex: "department",
            key: "department",
            title: "就诊机构",
        },
        {
            align: "center",
            dataIndex: "businessId",
            key: "businessId",
            title: "就诊号",
        },
        {
            align: "center",
            dataIndex: "visitAmount",
            key: "visitAmount",
            title: "就诊金额",
            customRender: (text: string, record: any, index: number) => {
                return toYuan(record.visitAmount)
            },
        },
    ];
    async getList() {
        this.pageList = [];
        if (this.pageType === "2") {
            this.columns = this.columnsDef.concat(this.shareColumns);
        } else if (this.pageType === "3") {
            this.columns = this.columnsDef.concat(this.goodsColumns);
        } else if (this.pageType === "4") {
            this.columns = this.columnsDef.concat(this.institutionColumns);
        } else {
            this.columns = this.columnsDef.concat([]);
        }
        this.loading = true;
        try {
            const res = await platformApi.getUserIntegralDetailStatistics({
                ...this.pageParams,
                userId: this.editInfo.userId,
                type: this.pageType,
                pageSize: this.pagination.pageSize,
                pageNum: this.pagination.current,
            });
            this.pageData = res.data?.data;
            this.pageList = this.pageData?.integralDetails || [];
            this.pagination.total = res.data?.total || 0;
        } finally {
            this.loading = false;
        }
    }
    resetList() {
        this.pagination.current = 1;
        this.getList();
    }
    pageChange(page: number, pageSize: number) {
        this.pagination.pageSize = pageSize;
        this.pagination.current = page;
        this.getList();
    }

    mounted() {
        this.getList();
    }
    clickPageType(type) {
        this.pageType = type;
        this.resetList();
    }
    closeModal() {
        this.$emit("closeModal");
    }
}
</script>
<style scoped lang="scss">
.userpoints-list-modal {
    .type-list {
        display: inline-flex;
        width: 120px;
        height: 80px;
        color: #fff;
        justify-content: center;
        flex-direction: column;
        align-items: center;
        margin-right: 10px;
        border-radius: 8px;
        font-size: 20px;
        cursor: pointer;
    }
    .type-list-title {
        font-size: 14px;
    }
    .type-list:nth-child(1) {
        background-color: #4995fa;
    }
    .type-list:nth-child(2) {
        background-color: #f46a49;
    }
    .type-list:nth-child(3) {
        background-color: #f6a441;
    }
    .type-list:nth-child(4) {
        background-color: #38b585;
    }
    .type-list:nth-child(5) {
        background-color: #c687ed;
    }

    .type-list:nth-child(1).type-list-active {
        box-shadow: 0 0 6px 4px rgba(73, 149, 250, 0.8);
    }
    .type-list:nth-child(2).type-list-active {
        box-shadow: 0 0 6px 4px rgba(244, 106, 73, 0.8);
    }
    .type-list:nth-child(3).type-list-active {
        box-shadow: 0 0 6px 4px rgba(246, 164, 65, 0.8);
    }
    .type-list:nth-child(4).type-list-active {
        box-shadow: 0 0 6px 4px rgba(56, 181, 133, 0.8);
    }
    .type-list:nth-child(5).type-list-active {
        box-shadow: 0 0 6px 4px rgba(198, 135, 237, 0.8);
    }
    .point-total {
        font-size: 18px;
        font-weight: bold;
    }
}
</style>
